<template>
	<div class="home">
		<div class="home_header">
			<p class="title">档案微应用系统</p>
			<p class="time">{{ dataTime }}</p>
		</div>
		<el-row :gutter="15">
			<el-col :span="12">
				<el-card>
					<div class="home_top">
						<div class="home_top_flex">
							<div class="home_top_flex_box box_color1">
								<p>{{ totalNumberList.archiveNum }}</p>
								<span>档案总数</span>
							</div>
							<div class="home_top_flex_box box_color2">
								<p>{{ totalNumberList.boxNum }}</p>
								<span>盒总数</span>
							</div>
						</div>
						<div class="home_top_bottom">
							<div class="home_top_flex_box box_color3">
								<p>{{ totalNumberList.archiveBorrow }}</p>
								<span>借阅盒数</span>
							</div>
							<div class="home_top_flex_box box_color4">
								<p>{{ totalNumberList.archiveLibrary }}</p>
								<span>未借阅盒数</span>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<pie-charts :width="'480px'" :height="'260px'" :data="classificationList"></pie-charts>
				</el-card>
			</el-col>
			<el-col :span="12" style="margin-top: 15px;">
				<el-card>
					<div class="home_left">
						<!--            <div class="home_left_box">-->
						<!--              <div class="home_left_box_charts">-->
						<!--                <div style="text-align: center;">档案利用月曲线图</div>-->
						<!--                <echarts :width="'340px'" :height="'200px'" :id="'leftTop'" :color="'#ff55ff'"-->
						<!--                  :rgba="'rgba(255, 85, 255, 0.4)'" :offset="'rgba(255, 85, 255, 0.1)'"-->
						<!--                  :data="useMounthList" :seriesName="'档案利用'"></echarts>-->
						<!--              </div>-->
						<!--              <div class="home_left_box_charts">-->
						<!--                <div style="text-align: center;">档案利用年曲线图</div>-->
						<!--                <echarts :width="'340px'" :height="'200px'" :id="'rightTop'" :color="'#00d887'"-->
						<!--                  :rgba="'rgba(0, 216, 135, 0.4)'" :offset="'rgba(0, 216, 135, 0.1)'"-->
						<!--                  :data="uesYearList" :seriesName="'档案利用'"></echarts>-->
						<!--              </div>-->
						<!--            </div>-->
						<div class="home_left_bottom">
							<div class="home_left_bottom_title">
								<div class="home_left_bottom_title_content">报警类型</div>
								<div class="home_left_bottom_title_content">报警值</div>
								<div class="home_left_bottom_title_content">报警时间</div>
							</div>
							<div class="home_left_bottom_content">
								<div class="home_left_bottom_content_flex" v-for="item in waringList" :key="item">
									<span>{{ item.alarm_type }}</span>
									<span>{{ item.alarm_threshold }}</span>
									<span>{{ item.alarm_time }}</span>
								</div>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="12" style="margin-top: 15px;">
				<div>
					<!--          <div>-->
					<!--            <el-card>-->
					<!--              <div class="home_rightTop">-->
					<!--                <column-chart :width="'695px'" :height="'195px'" :data="smartCabinetList"></column-chart>-->
					<!--              </div>-->
					<!--            </el-card>-->
					<!--          </div>-->
					<div>
						<el-row :gutter="15">
							<el-col :span="24">
								<el-card>
									<div class="home_leftBottom">
										<div style="text-align: center;">新增档案年曲线图</div>
										<echarts :height="'172px'" :id="'leftBottom'" :color="'#00d887'" :rgba="'rgba(0, 216, 135, 0.4)'" :offset="'rgba(0, 216, 135, 0.1)'"
										 :data="addYearList" :seriesName="'新增档案'" :xAxisType="'category'"></echarts>
									</div>
								</el-card>
							</el-col>
							<el-col :span="24" style="margin-top: 15px;">
								<el-card>
									<div class="home_rightBottom">
										<div style="text-align: center;">新增档案月曲线图</div>
										<echarts :height="'172px'" :id="'rightBottom'" :color="'#ff55ff'" :rgba="'rgba(255, 85, 255, 0.4)'" :offset="'rgba(255, 85, 255, 0.1)'"
										 :data="addMounthList" :seriesName="'新增档案'"></echarts>
									</div>
								</el-card>
							</el-col>
						</el-row>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		ref
	} from "vue";
	import columnChart from "@/components/Echarts/columnChart.vue";
	import PieCharts from '@/components/Echarts/pieCharts.vue';
	import Echarts from '@/components/Echarts/echarts.vue';
	import {
		classification,
		smartCabinet,
		alarmInformation,
		addYear,
		addMounth,
		totalNumber
	} from '@/api/index'

	// 定义获取页面中各信息的方法
	const getList = () => {

		// 档案类型统计信息
		const classificationList = ref({})
		// 智能柜数量统计信息
		const smartCabinetList = ref({})
		// 报警信息
		const waringList = ref([])
		// 年增长信息
		const addYearList = ref({})
		// 年利用信息
		const uesYearList = ref({})
		// 月增长信息
		const addMounthList = ref({})
		// 月利用信息
		const useMounthList = ref({})
		// 档案数量信息
		const totalNumberList = ref({})

		// 档案类型统计
		classification().then(response => {
			classificationList.value = response.data.catalogMap
		})
		// 报警信息
		alarmInformation().then(response => {
			waringList.value = response.data
		})

		// 年折线图
		addYear().then(response => {
			const yearData = response.data.yearData
			const yearDataNumAdd = response.data.yearDataNumAdd
			const yearDataNumUse = response.data.yearDataNumUse

			const addYear = {
				yearData: yearData,
				yearDataNumAdd: yearDataNumAdd
			}
			const useYear = {
				yearData: yearData,
				yearDataNumAdd: yearDataNumUse
			}
			addYearList.value = addYear
			uesYearList.value = useYear
		})

		// 月折线图
		addMounth().then(response => {
			const mounthData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
			const addNumberMouth = response.data.addNumberMouth
			const useNumberMouth = response.data.useNumberMouth

			const addMounth = {
				yearData: mounthData,
				yearDataNumAdd: addNumberMouth
			}
			const useMounth = {
				yearData: mounthData,
				yearDataNumAdd: useNumberMouth
			}
			addMounthList.value = addMounth
			useMounthList.value = useMounth
		})

		// 档案信息
		totalNumber().then(response => {
			totalNumberList.value = response.data
		})

		return {
			classificationList,
			smartCabinetList,
			waringList,
			addYearList,
			uesYearList,
			addMounthList,
			useMounthList,
			totalNumberList
		}
	}

	export default {
		name: 'HiultraArcUiIndex',
		components: {
			columnChart,
			PieCharts,
			Echarts
		},
		setup() {
			//定义数据以及变量
			const dataTime = ref('')
			let t = null

			//循环定时调用获取时间方法
			t = setTimeout(() => {
				time()
			}, 1000)

			function time() {
				//清除定时器
				clearTimeout(t);
				//获取当前时间
				const dt = new Date();
				const y = dt.getFullYear();
				const mt = dt.getMonth() + 1 < 10 ? "0" + (dt.getMonth() + 1) : dt.getMonth() + 1;
				const day = dt.getDate() < 10 ? "0" + dt.getDate() : dt.getDate();
				const h = dt.getHours() < 10 ? "0" + dt.getHours() : dt.getHours();
				const m = dt.getMinutes() < 10 ? "0" + dt.getMinutes() : dt.getMinutes();
				const s = dt.getSeconds() < 10 ? "0" + dt.getSeconds() : dt.getSeconds();
				//将获取的时间赋予ref变量
				dataTime.value = `${y}年${mt}月${day}日 ${h}:${m}:${s}`
				//设定定时器，循环运行
				t = setTimeout(time, 1000);
			}
			const {
				classificationList,
				smartCabinetList,
				waringList,
				addYearList,
				uesYearList,
				addMounthList,
				useMounthList,
				totalNumberList
			} = getList()

			return {
				dataTime,
				waringList,
				classificationList,
				smartCabinetList,
				addYearList,
				uesYearList,
				addMounthList,
				useMounthList,
				totalNumberList
			}
		}
	};
</script>

<style lang="scss" scoped>
	.home {
		&_header {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			background-color: #4DD9DC;
			color: #fff;
			height: 55px;
			margin-bottom: 18px;

			.title {
				text-align: right;
				width: 830px;
				font-size: 26px;
				line-height: 8px;
			}

			.time {
				line-height: 27px;
				margin-right: 30px;
			}
		}

		&_top {
			display: flex;
			flex-direction: column;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */

			&_flex {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-bottom: 20px;

				&_box {
					height: 120px;
					width: 220px;
					border-radius: 10px;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 15px 0 20px;
					box-sizing: border-box;
					color: #fff;
					margin: 0 80px;

					p {
						font-size: 30px;
						margin: 10px 0;
					}
				}
			}

			&_bottom {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				&_box {
					height: 120px;
					width: 220px;
					border-radius: 10px;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 15px 0 20px;
					box-sizing: border-box;
					color: #fff;

					p {
						font-size: 30px;
						margin: 10px 0;
					}
				}
			}
		}

		&_left {
			height: 425px;

			&_box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				&_charts {
					width: 340px;
					height: 200px;
				}
			}

			&_bottom {
				margin-top: 20px;
				height: 210px;
				// border-radius: 15px;

				&_title {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					background-color: #F0F0F0;

					&_content {
						width: 233px;
						text-align: center;
						font-size: 18px;
						font-weight: 550;
						// margin-top: 10px;
						margin: 5px 0;
					}
				}

				&_content {
					height: 400px;
					margin-top: 10px;
					overflow-y: auto;

					&_flex {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						padding: 5px 0;
						box-sizing: border-box;
						font-size: 14px;
						border-bottom: 2px solid #F0F0F0;

						span {
							width: 233px;
							text-align: center;
						}
					}

					&_flex:first-child {
						border-top: 2px solid #F0F0F0;
					}
				}

				&_content::-webkit-scrollbar {
					width: 0 !important
				}
			}
		}

		&_rightTop {
			height: 197.5px;
		}

		&_leftBottom {
			height: 197px;
		}

		&_rightBottom {
			height: 197px;
		}
	}

	.box_color1 {
		background: linear-gradient(to right, #A768F4, #8D36F2);
	}

	.box_color2 {
		background: linear-gradient(to right, #53DFFA, #1BA9DE);
	}

	.box_color3 {
		background: linear-gradient(to right, #FD9C00, #FB913E);
	}

	.box_color4 {
		background: linear-gradient(to right, #00C1FF, #1CA0FF);
	}

	.box_color5 {
		background: linear-gradient(to right, #00C1FF, #1CA0FF);
	}

	.box_color6 {
		background: linear-gradient(to right, #FD9C00, #FB913E);
	}

	.box_color7 {
		background: linear-gradient(to right, #53DFFA, #1BA9DE);
	}

	.box_color8 {
		background: linear-gradient(to right, #A768F4, #8D36F2);
	}
</style>
